<template>
  <div id="app">
    <el-table
      :data="tableData"
      v-loading="loading"
      border
      class="ui-table">
      <el-table-column prop="id" label="id"/>
      <el-table-column prop="matchTime" label="MatchTime"/>
      <el-table-column prop="matchCode" label="matchCode" :width="150"/>
      <el-table-column prop="score" label="比分" :width="100">
        <template slot-scope="scope">{{scope.row.scoreH}} - {{scope.row.scoreA}}</template>
      </el-table-column>
      <el-table-column prop="liveTime" label="时间" :width="100"/>
      <el-table-column prop="leagueName" label="联队名称" />
      <el-table-column prop="name" label="球队">
        <template slot-scope="scope">
          <div>{{scope.row.home}}</div>
          <div>{{scope.row.away}}</div>
        </template>
      </el-table-column>
      <el-table-column prop="ft" label="全场让球" :width="150">
        <template slot-scope="scope">
          <template v-if="scope.row.ft && scope.row.ft.length > 0">
            <template v-for="(item, index) in scope.row.ft" v-if="item">
              <div :key="index" class="ui-table-tag" v-if="item.hdpOddsHome || item.hdpOddsAway">
                <div>{{item.hdp || 0}}</div>
                <div class="tag-right">
                  <div v-if="item.hdpOddsHome">{{item.hdpOddsHome | toFixedFilter}}</div>
                  <div v-if="item.hdpOddsAway">{{item.hdpOddsAway | toFixedFilter}}</div>
                </div>
              </div>
            </template>
          </template>
        </template>
      </el-table-column>
      <el-table-column prop="ft1" label="全场大/小" :width="150">
        <template slot-scope="scope">
          <template v-if="scope.row.ft1 && scope.row.ft1.length > 0">
            <template v-for="(item, index) in scope.row.ft1" v-if="item">
              <div :key="index" class="ui-table-tag" v-if="item.ouOddsHome || item.ouOddsAway">
                <div>{{item.ou || 0}}</div>
                <div class="tag-right">
                  <div v-if="item.ouOddsHome">{{item.ouOddsHome | toFixedFilter}}</div>
                  <div v-if="item.ouOddsAway">{{item.ouOddsAway | toFixedFilter}}</div>
                </div>
              </div>
            </template>
          </template>
        </template>
      </el-table-column>
      <el-table-column prop="ih" label="上半场让球" :width="150">
        <template slot-scope="scope">
          <template v-if="scope.row.ih && scope.row.ih.length">
            <template v-for="(item, index) in scope.row.ih" v-if="item">
              <div :key="index" class="ui-table-tag" v-if="item.hdpOddsHome || item.hdpOddsAway">
                <div>{{item.hdp || 0}}</div>
                <div class="tag-right">
                  <div v-if="item.hdpOddsHome">{{item.hdpOddsHome | toFixedFilter}}</div>
                  <div v-if="item.hdpOddsAway">{{item.hdpOddsAway | toFixedFilter}}</div>
                </div>
              </div>
            </template>
          </template>
        </template>
      </el-table-column>
      <el-table-column prop="ih1" label="上半场大/小" :width="150">
        <template slot-scope="scope">
          <template v-if="scope.row.ih1 && scope.row.ih1.length > 0">
            <template v-for="(item, index) in scope.row.ih1" v-if="item">
              <div :key="index" class="ui-table-tag" v-if="item.ouOddsHome || item.ouOddsAway">
                <div>{{item.ou || 0}}</div>
                <div class="tag-right">
                  <div v-if="item.ouOddsHome">{{item.ouOddsHome | toFixedFilter}}</div>
                  <div v-if="item.ouOddsAway">{{item.ouOddsAway | toFixedFilter}}</div>
                </div>
              </div>
            </template>
          </template>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
  import {checkIsNullOrEmpty} from './utils';

  export default {
    data() {
      return {
        loading: true,
        tableData: [],
      };
    },
    mounted() {
      const socket = io.connect('http://54.92.32.79:9093');

      socket.on('connect', () => console.log('connect...'));

      socket.on('keyEvent', (data) => this.init(data));

      socket.emit('keyEvent', 'IBC_Soccer_HDPOU-R');

      socket.on('IBC_Soccer_HDPOU-R', (data) => {
        // 更新数据
        //console.log(data);
        const {type, id, index} = data;
        if (type === 'update') this.updateTableData(id, data.data);
        if (type === 'delete') this.$nextTick(() => this.deleteTableData(data.data));
        if (type === 'add') this.addTableData(id, data.data, index);
      });
    },
    filters: {
      toFixedFilter(val) {
        return (+val).toFixed(2)
      }
    },
    methods: {
      getTaleData(data) {
        const tableData = data?.map((item) => {
          return {
            matchCode: Number(item.matchCode),
            id: item.id,
            matchTime: item.matchTime,
            scoreH: item.scoreH,
            scoreA: item.scoreA,
            liveTime: item.liveTime,
            leagueName: item.leagueName,
            home: item.home,
            away: item.away,
            ft: item?.ft?.map((ft) => {
              return {
                hdp: checkIsNullOrEmpty(ft?.hdp),
                hdpOddsHome: checkIsNullOrEmpty(ft?.hdpOddsHome),
                hdpOddsAway: checkIsNullOrEmpty(ft?.hdpOddsAway)
              };
            }) ?? [],
            ft1: item?.ft?.map((ft) => {
              return {
                ou: checkIsNullOrEmpty(ft?.ou),
                ouOddsHome: checkIsNullOrEmpty(ft?.ouOddsHome),
                ouOddsAway: checkIsNullOrEmpty(ft?.ouOddsAway)
              };
            }) ?? [],
            ih: item?.ih?.map((ih) => {
              return {
                hdp: checkIsNullOrEmpty(ih?.hdp),
                hdpOddsHome: checkIsNullOrEmpty(ih?.hdpOddsHome),
                hdpOddsAway: checkIsNullOrEmpty(ih?.hdpOddsAway)
              };
            }) ?? [],
            ih1: item.ih?.map((ih) => {
              return {
                ou: checkIsNullOrEmpty(ih?.ou),
                ouOddsHome: checkIsNullOrEmpty(ih?.ouOddsHome),
                ouOddsAway: checkIsNullOrEmpty(ih?.ouOddsAway)
              };
            }) ?? [],
          };
        });
        return tableData;
      },
      sortTableData(data) {
        return data.sort((a, b) => a.matchCode - b.matchCode);
      },
      init(data) {
        const tableData = this.getTaleData(data);
        this.tableData = this.sortTableData(tableData);
        console.log(this.tableData);
        this.loading = false;
      },
      updateTableData(id, data) {
        console.log('更新前数据', data)
        const tableData = [...this.tableData];
        const findData = tableData.find((item) => item.id === id);
        if (!findData) return;
        Object.keys(data).forEach((key) => {
          if (['matchTime', 'liveTime', 'leagueName', 'scoreH', 'scoreA', 'home', 'away'].includes(key)) {
            findData[key] = data[key];
          }

          try {
            if (['ft', 'ih'].includes(key)) {
              if (!(data[key]?.length>0)) {
                findData[key] = []
                findData[key + '1'] = []
              } else {
                data[key]?.forEach((item) => {
                  let {index, type} = item;
                  if (!type) {
                    if ('ft' === key) {
                      type = item.hasOwnProperty('hdp') ? 'ft' : 'ft1'
                    }
                    if ('ih' === key) {
                      type = item.hasOwnProperty('hdp') ? 'ih' : 'ih1'
                    }
                  }

                  const d = {};
                  Object.keys(item).forEach((k) => {
                    if (!['index', 'type'].includes(k)) {
                      d[k] = checkIsNullOrEmpty(item[k]);
                    }
                  })
                  if (['ft', 'ft1', 'ih', 'ih1'].includes(type) && index !== undefined) {
                    findData[type][index] = {...findData[type][index] ?? {} , ...d}
                  }
                })
              }
            }
          } catch (e) {
            console.log('数据计算错误'+e)
          }
        });
        const tables = tableData.map((item) => {
          if (item.id === id) return findData;
          return item;
        });

        console.log('更新后的数据=====>', tables)
        this.tableData = tables;
      },
      deleteTableData(ids) {
        const tableData = this.tableData.filter((item) => !ids?.includes(item.id));
        this.tableData = tableData;
      },
      addTableData(id, data, index) {
        const tableData = this.getTaleData([data]);
        const d = [...this.tableData];
        this.tableData = this.sortTableData([...tableData, ...d]);
      },
    },
  };
</script>
<style lang="less">
  .ui-table {
    min-height: 200px;
    width: 100%;
  }

  .ui-table-tag {
    display: flex;
    justify-content: space-between;
    padding: 0 10px;

    > div:first-of-type {
      margin-right: 10px;
    }
  }

  .ui-table-tag + .ui-table-tag {
    margin-top: 20px;
  }

  .tag-right {
    display: flex;
    flex-direction: column;

    > div {
      text-align: right;
    }
  }
</style>
